<template>
    <ph-flex class="ph-dt-panel" dir="col">
        <div class="ph-date-tbh">
                <label v-for="(th,thi) in ths" class="ph-date-th" :key="thi">{{th}}</label>
        </div>
        <table class="ph-date-tb">
            <tr class="ph-date-tbr" v-for="(tr,tri) in dateTable" :key="tri">
                <td v-for="(td,tdi) in tr" :key="tdi" 
                :class="cellCnFn(td)" 
                :title="td.desc"
                @click="!isDisabled(td.dmy)&&$emit('date-change',td.dmy)">{{td.title}}</td>
            </tr>
        </table>
    </ph-flex>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType, Ref, toRefs } from 'vue'
import { printDate, date2number } from '../../shared/datetime'
import {PhFlex} from '../base'

export default defineComponent({
    components:{
        PhFlex
    },
    props:{
        year:{type:Number,default:0},
        month:{type:Number,default:0},
        date:{type:Number,default:0},
        lang:{type:Object as PropType<Record<string,unknown>>},

        weekText:{
            type:Array as PropType<Array<string>>
        },
        importants:{
            type:Array as PropType<Array<{title:string|number,md:string,desc?:string}>>,
            default:()=>[]
        },
    },
    setup(props) {
        const ths = computed(()=>props.weekText||props.lang?.weekText)
        const {year,month,date} = toRefs(props)
        const start = inject("start") as Ref<Record<string,number>>
        const end = inject("end") as Ref<Record<string,number>>
        const importants = computed(()=>{
            return props.importants.map(({title,md,desc})=>{
                const mds = md.split("-")
                return {
                    title,
                    desc,
                    m:mds[0],
                    d:mds[1]
                }
            })
        })
        const dateTable = computed(()=>{
            const dates = printDate(year.value,month.value).map(rows=>{
                return rows.map(dmy=>{
                    const imp = importants.value.filter(imp=>{
                        return (imp.m=="*")?Number(imp.d)==dmy[0]:(Number(imp.d)==dmy[0]&&Number(imp.m)==dmy[1])
                    })[0]
                    return {
                        dmy,
                        desc:imp?imp.desc:'',
                        title:imp?imp.title:dmy[0],
                        imp:!!imp
                    }
                })
            })
            return dates
        })
        const equalDate = (d:number[])=>{
            return (
                date.value===d[0]&&
                month.value===d[1]&&
                year.value===d[2])
        }
        const isDisabled = (dmy:number[])=>{
            const [d,m,y] = dmy;
            const s = start.value?date2number([start.value.yyyy,start.value.MM,start.value.dd]):0
            const e = end.value?date2number([end.value.yyyy,end.value.MM,end.value.dd]):0
            const date = date2number([y,m,d])
            if(s&&e)
                return date<s||date>e
            if(s)
                return date<s
            if(e)
                return date>e
            return false
        }
        const cellCnFn = (td:{dmy:number[],imp:boolean})=>{
            const 
                d = td.dmy,
                imp = td.imp;
            const disabled = isDisabled(d)
            return {
                'ph-active':!disabled&&equalDate(d),
                'ph-ncurrent':d[1]!==month.value,
                'ph-disabled':disabled,
                'ph-imp':imp
            }
        }

        return {
            dateTable,
            ths,
            cellCnFn,
            isDisabled
        }
    },
})
</script>
<style lang="scss" scoped>
.ph-dt-panel{
    align-items: center;
    padding-top: 0;
    .ph-date-tbh{
        width: 100%;
        display: flex;
        justify-content: center;
        padding: var(--ph-5);
        font-weight: 700;
        .ph-date-th{
            line-height: 1.6;
        }
    }
    .ph-date-th,td{
        height: calc(var(--phx) * 2.2857);
        text-align: center;
        overflow: hidden;
        flex:1;
    }
    .ph-date-tb{
        border-collapse: collapse;
        width:100%;
        td{
            cursor: pointer;
            background-color: var(--ph-dt-cell);
            &:not(.ph-active):not(.ph-disabled){
                &:hover{
                    background-color: var(--ph-dt-cell-hover);
                }
            }
            &.ph-ncurrent:not(.ph-active):not(.ph-disabled){
                background-color:var(--ph-dt-cell-side);
                &:hover{
                    background-color: var(--ph-dt-cell);
                }
            }
            &.ph-imp{
                position: relative;
                &:before{
                    content:"";
                    position: absolute;
                    width: var(--ph-5);
                    height: var(--ph-5);
                    border-radius: 50%;
                    background-color: var(--ph-dt-cell-imp);
                    bottom: 3px;
                    left: 0;
                    right: 0;
                    margin: auto;
                }
            }
        }
    }
}
</style>
